<template>
    <div class="example-editor" ref="editorRef"></div>
</template>
<!-- 设置单元格样式 -->
<script lang="ts" setup>
import { mxCell, type mxGraph } from "mxgraph";
import { onMounted, ref, Ref } from "vue";
import {
    myMxClient,
    myMxCodec,
    myMxConstants,
    myMxEdgeStyle,
    myMxGraph,
    myMxPoint,
    myMxRubberband,
    myMxUtils,
} from "@/components/myMxGraph/myMxGraphLoader";
// from "../myMxGraph/myMxGraphLoader";
const editorRef: Ref<HTMLDivElement | undefined> = ref();
const currentGraph: Ref<mxGraph | undefined> = ref();
function initGraph() {
    const container = editorRef.value;
    if (!myMxClient.isBrowserSupported()) {
        myMxUtils.error("浏览器不支持", 200, false);
    }
    const graph = new myMxGraph(container);
    var parent = graph.getDefaultParent();
    graph.getModel().beginUpdate();

    // 定义节点样式
    var nodeStyle ={};
    nodeStyle[myMxConstants.STYLE_FILLCOLOR]="#3CAEA3";
    nodeStyle[myMxConstants.STYLE_FONTSIZE]=12;
    nodeStyle[myMxConstants.STYLE_STROKECOLOR]="white";
    nodeStyle[myMxConstants.STYLE_FONTCOLOR]="white";
    nodeStyle[myMxConstants.STYLE_ROUNDED]=1;
    // 将定义好的样式object push 到 stylesheet
    graph.getStylesheet().putCellStyle('nodeStyle',nodeStyle)


    try {
        var v1 = graph.insertVertex(parent, null, "Hello,ZCC🐑", 20, 200, 80, 30,"fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=12;");
        var v2 = graph.insertVertex(parent, null, "World", 200, 150, 80, 30,'nodeStyle');
        graph.insertEdge(parent, null, "", v1, v2,);
    } finally {
        // Updates the display
        graph.getModel().endUpdate();
    }
}
onMounted(() => {
    console.log("app is onMounted");
    initGraph();
});



</script>

<style>
.example-editor {
    background: url("@/assets/editor/images/grid.gif");
    height: 100vh;
    width: 100%;
}
</style>
